<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { userEditService } from '../../api/user'
// 是在使用仓库中数据的初始值（无响应式）结构无问题
const { user, getUser } = useUserStore()
const formRef = ref()
const userInfo = ref({ ...user })
// const userInfo = user

const rules = {
  studentName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  studentTel: [
    {
      pattern: /^[0-9]{11}$/,
      message: '请输入11位数字电话号码',
      trigger: 'blur'
    }
  ],
  counsellorTel: [
    {
      pattern: /^[0-9]{11}$/,
      message: '请输入11位数字电话号码',
      trigger: 'blur'
    }
  ],
  professionalRanking: [
    { pattern: /^\d+$/, message: '专业排名必须为数字', trigger: 'blur' }
  ],
  classRanking: [
    { pattern: /^\d+$/, message: '班级排名必须为数字', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  // 等待效验成果
  //   await formRef.value.vaildate()
  // 提交修改
  // await userUpdateInfoService(form.value)

  const valid = await formRef.value.validate()
  if (valid) {
    // console.log(userInfo.value)
    await userEditService(userInfo.value)
    getUser(userInfo.value.studentId)
    ElMessage.success('修改成功')
  }
}
</script>

<template>
  <page-container title="基本资料">
    <el-row>
      <el-col :span="12">
        <el-form
          :model="userInfo"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          size="large"
        >
          <el-form-item label="用户学号">
            <el-input v-model="userInfo.studentId" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="studentName">
            <el-input v-model="userInfo.studentName"></el-input>
          </el-form-item>
          <el-form-item label="用户性别">
            <el-select v-model="userInfo.studentSex">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="用户年级">
            <el-input v-model="userInfo.studentGrade"></el-input>
          </el-form-item>
          <el-form-item label="用户班级">
            <el-input v-model="userInfo.studentClass"></el-input>
          </el-form-item>
          <el-form-item label="所在部门">
            <el-input v-model="userInfo.department"></el-input>
          </el-form-item>
          <el-form-item label="担任职务">
            <el-input v-model="userInfo.holdPosition"></el-input>
          </el-form-item>
          <el-form-item label="政治面貌">
            <el-select v-model="userInfo.politicalStatus">
              <el-option label="党员" value="党员" />
              <el-option label="团员" value="团员" />
              <el-option label="群众" value="群众" />
            </el-select>
          </el-form-item>
          <el-form-item label="电话" prop="studentTel">
            <el-input v-model="userInfo.studentTel"></el-input>
          </el-form-item>
          <el-form-item label="绩点">
            <el-input v-model="userInfo.studentGpa"></el-input>
          </el-form-item>
          <el-form-item label="专业排名" prop="professionalRanking">
            <el-input v-model="userInfo.professionalRanking"></el-input>
          </el-form-item>
          <el-form-item label="班级排名" prop="classRanking">
            <el-input v-model="userInfo.classRanking"></el-input>
          </el-form-item>
          <el-form-item label="所在宿舍">
            <el-input v-model="userInfo.studentDormitory"></el-input>
          </el-form-item>
          <el-form-item label="辅导员姓名">
            <el-input v-model="userInfo.studentCounsellor"></el-input>
          </el-form-item>
          <el-form-item label="辅导员电话" prop="counsellorTel">
            <el-input v-model="userInfo.counsellorTel"></el-input>
          </el-form-item>
          <el-form-item label="个人信息" prop="content">
            <div class="editor">
              <quill-editor
                ref="editorRef"
                v-model:content="userInfo.studentInstruction"
                content-type="html"
                theme="snow"
              ></quill-editor>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </page-container>
</template>

<style lang="scss" scoped>
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>
